<template>
    <div class="shopcar-container">
        <div class="goods-list">
            <div class="mui-card">
                <div class="mui-card-content">
                    <div class="mui-card-content-inner">
                        <mt-switch v-model="$store.state.car[0].selected" @change="updateState($store.state.car[0].selected)"></mt-switch>
                        <img src="https://img12.360buyimg.com/n7/jfs/t1/63859/7/3651/85020/5d1c8160E72bf7ea6/297c18be6ec1b7a6.jpg"
                             alt=""/>
                        <div class="goods-info">
                            <h3>小米 CC 9屏幕指纹 3200万美颜自拍 480</h3>
                            <div class="goods-opt">
                                <span class="price">￥1999</span>
                                <numbox></numbox>
                                <a href="javascript:;">删除</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner jiesuan">
                    <div class="left">
                        <p>总计（不含运费）</p>
                        <p>已勾选商品<span class="count">{{ this.$store.getters.getAllCountAndPrice.selectCount }}</span>件，总价<span class="price">￥{{ this.$store.getters.getAllCountAndPrice.totalPrice }}</span></p>
                    </div>
                    <mt-button type="danger">去结算</mt-button>
                </div>
            </div>
        </div>
    </div>
</template>
<script type="es6">
import numbox from '../subcomponents/shopcar_numbox.vue';
    export default {
        data(){
            return {

            }
        },
        methods: {
            updateState(val) {
                this.$store.commit('updateSelect',{id:1,selected:val});
            }
        },
        components: {
            numbox
        }
    }
</script>
<style lang="less" scoped>
.shopcar-container {
    background-color: #eee;
    overflow: hidden;
    .goods-list {
        .mui-card-content-inner {
            display: flex;
            align-items: center;
            justify-content: space-between;
            img {
                width: 40px;
                height: 40px;
            }
            .goods-info {
                h3 {
                    font-size: 14px;
                }
                .goods-opt {
                    .price {
                        color: red;
                    }
                }
            }
        }
    }
    .jiesuan {
        display: flex;
        justify-content: space-between;
        .left {
            .count {
                color: red;
            }
            .price {
                color: red;
            }
        }
    }
}
</style>